<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>touch相关</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: orangered;
        }
    </style>
</head>
<body>

<div class="box"></div>

<script>
    window.onload = function () {
        // 1.拿到标签
        var box = document.querySelector('.box');


        // 2.添加事件
        var startX,startY, movingX,movingY, changedX,changedY;
        startX = 0;
        startY = 0;
        movingX = 0;
        movingY = 0;
        changedX = 0;
        changedY = 0;

        box.addEventListener('touchstart', function (e) {
            console.log('touchstart');
            startX = e.touches[0].clientX;
//            console.log(startX, '=?:', e.touches[0].clientX);
            startY = e.touches[0].clientY;

        });

        box.addEventListener('touchmove', function (e) {
            // 清除默认效果
            e.preventDefault()


//            console.log('touchmove');
            movingX = e.touches[0].clientX;
            movingY = e.touches[0].clientY;

            // 如果是从左向右移动 ,正的,反之就是负的
            changedX = movingX - startX;
            // 从上向下移动是正的,反之就是负的
            changedY = movingY - startY;


            console.log('changeY:', changedY);
        });

        box.addEventListener('touchend', function (e) {
            console.log('touchend');
            console.log('changeX:', changedX, 'changeY:', changedY);

            // touchend通常在此处做数据过滤,与数据还原
            startX = 0;
            startY = 0;
            movingX = 0;
            movingY = 0;
            changedX = 0;
            changedY = 0;

        });
    }
</script>

</body>
</html>